<template>
  <yd-navbar class="indexHeader" height="0.96rem" bgcolor="rgba(255,255,255,0)" >
        <span slot="left" class="indexheader-font">
            我的状态
        </span>

        <span slot="right" class="infoNum" @click="toMsgInfo">
            <span>
              <el-badge is-dot class="item" v-if="infoNum>0">
                <i class="yadu-icon-lingdang"></i>
              </el-badge>
              <i class="yadu-icon-lingdang" v-if="infoNum<=0"></i>
            </span>
        </span>
        <span slot="right" class="more">
            <yd-icon name="more" size="0.53333rem"></yd-icon>
        </span>
    </yd-navbar>
</template>

<script>
export default {
  name: 'indexHeader',
  props:['infoNum'],
  methods: {
    toMsgInfo() {
      this.$router.push('/msginfo')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
@import "../style/public.scss";
  .indexHeader{
    .yd-navbar-item:first-child{
      padding:0 rem(20);
    }
    .indexheader-font{
      font-size:rem(32);
      color:#fff;
    }
    .yadu-icon-lingdang{
      font-size:rem(40);
      color:#fff;
    }
    .infoNum{
      .el-badge__content el-badge__content--undefined is-fixed is-dot{
        top:rem(6);
        right:rem(12);
      }
    }
    .more{
      transform:rotate(90deg);
      font-size:rem(26);
      color:#fff;
    }
  }
</style>
